<template>
  <div class="app-h5">
    <div>
      <div>
        <div :class="previewClass">
          <div class="preview_iframe_wrap">
            <div style="width:100%;height:100%;">
              <div class="title">{{ form.title }}</div>
              <div class="content">
                <div class="content-info">原创</div>
                <div class="content-author">{{ form.author }}</div>
                <div class="content-time">{{ form.publishDate }}</div>
              </div>
              <div class="content-html" v-html="contentHtml"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getArticleDetail} from "@/api/preview";

export default {
  data() {
    return {
      form: {},
      contentHtml: '',
      contentId: this.$route.query.id || '0',
      contentType: this.$route.query.type,
      clientType: "mobile",
      previewClass: "preview preview_phone",
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const param={
        contentId:this.contentId
      }
      getArticleDetail(param).then(response => {
        this.form = response.data
        this.contentHtml = response.data.contentHtml
      })
    }
  }
}

</script>

<style scoped>
.app-h5 {
}

.title {
  font-size: 40rem;
  font-weight: bold;
  margin-bottom: 24rem
}

.content {
  display: flex;
  align-items: center;
  font-size: 24rem;
}

.content > div {
  height: 40rem;
  line-height: 40rem;
  margin-right: 20em;
}

.content .content-info {
  background: #01010124;
  padding: 0 4rem;
  border-radius: 4rem;
}

.content-html >>> img,
.content-html /deep/ img {
  max-width: 100% !important;
  height: auto !important;
}
.content-html /deep/ p {
    font-size: 26rem;
    line-height: 48rem;
    color: #333333;
    text-align: justify;
}

.preview.preview_mobile .preview_iframe_wrap {
  bottom: 152rem;
  height: auto;
  margin-top: 88rem;
  margin-bottom: 36rem;
  padding-top: 80rem;
  padding-bottom: 130rem;
}

.preview.preview_mobile .preview_iframe_wrap:before {
  width: 90rem;
  height: 16rem;
  top: 30rem;
  border-radius: 8rem
}

.preview.preview_mobile .preview_iframe_wrap:after, .preview.preview_mobile .preview_iframe_wrap:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #c8c9cc;
  transition: all .3s
}

.preview.preview_mobile .preview_iframe_wrap:after {
  width: 64rem;
  height: 64rem;
  bottom: 34rem;
  border-radius: 50%
}

.preview.preview_phone .preview_iframe_wrap {
  width: 750rem;
  margin: 106rem auto;
  padding-bottom: 120rem;
  border-radius: 66rem
}

.preview.preview_phone .preview_iframe_wrap:after {
  width: 60rem;
  height: 60rem;
  bottom: 30rem
}



</style>
